<template>
    <div class="login">
        <el-card class="box-card" style="max-width: 480px">
            <el-form  style="max-width: 600px" :model="loginForm" label-width="auto"
                class="demo-ruleForm" status-icon>
                <el-form-item label="学生：">
                    <el-link class="iconfont icon-student" @click="skip(1, '学生')"></el-link>
                </el-form-item>
                <el-form-item label="导师：">
                    <el-link class="iconfont icon-teacher" style="color: red;" @click="skip(2, '导师')"></el-link>
                </el-form-item>
                <el-form-item label="专家：">
                    <el-link class="iconfont icon-specialist" style="color: orange;" @click="skip(3, '专家')"></el-link>
                </el-form-item>
                <el-form-item label="校级管理员：">
                    <el-link class="iconfont icon-school"  style="color: #126bae;" @click="skipIntendant(20, '校级管理员')"></el-link>
                </el-form-item>
                <el-form-item label="超级管理员：">
                    <el-link class="iconfont icon-intendant" style="color: red;" @click="skipIntendant(999, '超级管理员')"></el-link>
                </el-form-item>
                <el-form-item>
                    <el-link @click="$router.push('/')">已有帐号？返回登录</el-link>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter();

// 初始化绘制图像验证码
onMounted(() => {

})

// 登录信息
const loginForm = ref({
    account: '',
    password: '',
    code: ''
})

const skip = (roleId:number, roleName:any) => {
    router.push({
        path: '/userRegister',
        query: {
            roleId: roleId,
            roleName: roleName
        }
    })
}
const skipIntendant = (roleId:any, roleName:any) => {
    router.push({
        path: '/adminRegister',
        query: {
            roleId: roleId,
            roleName: roleName
        }
    })
}

</script>

<style scoped lang="scss">
.login {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url("../../assets/image/login.png");
    background-size: 100% 100%;
}

.el-card {
    width: 500px;
    opacity: 0.8;
    padding-left: 130px;
}

.form-item {
    display: flex;
    justify-content: center;
    align-items: center;
}

.input {
    width: 295px;
}

.iconfont {
    font-size: 20px;
    
}

.lookButton {
    width: 440px;
    background-color: #9bbde8;
    color: #fff;
    border: 1px solid #9bbde8;
}

.lookButton:hover {
    width: 440px;
    background-color: #fff;
    color: #50bbff;
    border: 1px solid #50bbff;
}

.lookButton:active {
    width: 440px;
    background-color: #fff;
    color: #50bbff;
    border: 1px solid #50bbff;
}
</style>